<template>
  <div class="main container ">
    <div :class="['musice',{'rotates':bor}]" @click="isplay_m">
      <img src="../assets/music.png" alt="">
    </div>
    <div class="heard">
      <div class="biglantern">
        <img class="img-fluid" src="../assets/imgs/大灯笼.png" alt="">
      </div>
      <div class="leftSmallLantern">
        <img class="img-fluid" src="../assets/imgs/leftde.png" alt="">
      </div>
      <div class="rightSmallLantern">
        <img class="img-fluid" src="../assets/imgs/rightde.png" alt="">
      </div>
    </div>
    <div class="title animate__animated animate__tada">
      <img class="img-fluid " src="../assets/imgs/广州正度×博物馆头条.png" alt="">
    </div>
    <div class="juanzhou animate__animated animate__tada ">
      <img class="img-fluid" src="../assets/imgs/2024.png" alt="">


    </div>
    <div class="contern ">
      <div class="dragon animate__animated animate__bounceInUp">
<!--        <img :src="longImg" alt="">-->
        <img src="https://minsuguan.oss-cn-hangzhou.aliyuncs.com/icon/%E9%BE%99-%E5%8A%A8%E7%94%BB.gif" alt="" v-cloak>
      </div>
      <div class="cloud">
        <div class="cloud1 cloud_img animate__animated animate__bounceInLeft" ><img src="../assets/imgs/云1.png" alt=""></div>
        <div class="cloud2 cloud_img animate__animated "  ><img src="../assets/imgs/云2.png" alt=""></div>
        <div class="cloud3 cloud_img animate__animated animate__slideInRight "  ><img src="../assets/imgs/云3.png" alt=""></div>
        <div class="cloud4 cloud_img animate__animated animate__slideInLeft"  ><img src="../assets/imgs/云4.png" alt=""></div>
        <div class="cloud5 cloud_img animate__animated  animate__lightSpeedInRight"  ><img src="../assets/imgs/云5.png" alt=""></div>
      </div>
    </div>
    <div class="content">
    <div class="itemer">我是第1个行内人 </div>
    <div class="itemes">
      <van-field v-model="value" placeholder="我是（待输入）" border="false"  color="#d28429"  input-align="center" @blur="blurs"  @focus="inp"/>
    </div>
    </div>
    <div class="button" @click="draw">
      <img src="../assets/imgs/去破圈.png" alt="">
    </div>
    <van-notify v-model:show="show" type="success" background="#cc3e42">
      <span>请输入名字</span>
    </van-notify>
  </div>
</template>

<script setup>


import scrollReveal from 'scrollreveal'
import {onMounted, reactive, ref, watch} from 'vue'
import longd from "../assets/imgs/龙年大吉.png"
import router from "@/router/index.js";
import {useCounterStore} from '@/stores/counter'

const counter = useCounterStore()
const longData=[
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00000.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00001.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00002.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00003.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00004.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00005.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00006.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00007.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00008.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00009.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00010.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00012.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00015.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00014.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00015.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00016.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00017.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00018.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00019.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00020.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00021.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00022.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00023.png',
    'https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99%E5%B9%B4%E5%A4%A7%E5%90%89_00023.png',

]
const longImg=ref(longData[0])
let currentIndex = 0;
let isForward = true;
const jing=ref(true)
setTimeout(()=>{
  longImg.value='https://minsuguan.oss-cn-hangzhou.aliyuncs.com/%E9%BE%99-%E5%8A%A8%E7%94%BB/%E9%BE%99-%E5%8A%A8%E7%94%BB.gif'
},1000)
const bor = ref(false)
const isplay_m = () => {
  if (bor.value) {
    counter.suspend()
  } else {
    counter.play()
  }
}
watch(() => counter.musicIsPlay, (newValue) => {
  bor.value = !bor.value
})
const blurs=()=>{
  console.log(value.value)
  localStorage.setItem('name',value.value)
}
// 3 秒后自动关闭
const show = ref(false);

const showNotify = () => {
  show.value = true;
  setTimeout(() => {
    show.value = false;
  }, 2000);
};
const draw=()=>{
  if (!value.value){
    showNotify()
  }else {
    router.push("/draw")
  }


}
const forLong=()=>{
  setInterval(() => {
    if (isForward) {
      currentIndex = (currentIndex + 1) % longData.length;
    } else {
      currentIndex = (currentIndex - 1 + longData.length) % longData.length;
    }

    longImg.value = longData[currentIndex];

    if (currentIndex === longData.length -1) {
      isForward = false;
    } else if (currentIndex === 0) {
      isForward = true;
    }
    console.log(currentIndex)
  }, 50); // 每隔2秒切换一张图片

}
// setTimeout(()=>{forLong()},1500)
const db=()=>{
  let interval =1000;
  buttonLabel.value = '正在抽奖...'
  const startInterval = () => {
    const timer = setTimeout(() => {

      const randomNumber = getRandomNumber(itemArr);
      winningTheJackpotNum.value=randomNumber

      console.log(randomNumber);
      interval -= 60; // 时间逐渐减少，加快速度



      if (interval <= 0) {
        buttonLabel.value="点击抽奖"
        clearInterval(timer);
      } else {
        startInterval();
      }
    }, interval);
  };

  startInterval();
}
const value = ref();
const inp=()=>{
  value.value=""
}
const data = reactive({
  // 3.在reactive()中声明scrollReveal组件
  scrollReveal: scrollReveal(),

})
// 4.设置scrollReveal的方法
const retScroll = () => {
  data.scrollReveal.debug = true;
  // reveal()的类名可以为id (#reveal-top) 也可以为class(.reveal-top) 名称随意 并且也支持并集class写法 注意必须设置类否则无法使用
    data.scrollReveal.reveal('.jz ', {
      // 动画的时长
      duration: 1800,
      // 延迟时间
      delay: 0,
      // 动画开始的位置，'bottom', 'left', 'top', 'right'
      origin: 'bottom',
      // 回滚的时候是否再次触发动画
      reset: true,
      // 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））
      // // useDelay: 'onload',
      // 在移动端是否使用动画
      mobile: true,
      // 滚动的距离，单位可以用%，rem等
      distance: '0px',
      // 其他可用的动画效果
      opacity: 0.001,
      // 执行速度 线性函数啥的
      easing: 'cubic-bezier(0.5, 0, 0, 1)',
      // 执行方式（缩放）
      scale:0,
      // 使用执行之前的回调函数
      beforeReveal: function (ele) {
        console.log('使用执行之前的回调函数');
      },
      afterReveal:function (){
        console.log("使用执行之后的回调函数")
      },

    })


}
// 5.页面加载生命周期
onMounted(() => {
  // 6.启动scrollReveal的方法
  retScroll()
})

</script>

<style scoped lang="scss">
.main {
  overflow: hidden;
  padding: 0;
  margin: 0;
  // position: relative;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: url(../assets/imgs/bg.jpg);
  background-size: 100% 100%;
display: flex;
flex-direction: column;
// justify-content: space-evenly;
align-items: center;
  img {
    width: 100%;
    height: 100%;

  }
  .musice {
    position: fixed;
    width: 30px;
    height: 30px;
    right: 1%;
    top: 1%;

    img {
      width: 100%;
      height: 100%;
    }

    z-index: 99999999999999999999999999;
  }
  .heard {
    // position: relative;
// align-self: self-start;
    .biglantern {
      width: 100%;

      img {
        width: 100%;
        height: 100%;
      }

    }

    .leftSmallLantern, .rightSmallLantern {
      position: absolute;
      top: 0px;
      width: 80px;
      height: 150px;

    }

    .rightSmallLantern {
      right: 0;
    }
  }

  .title {
    position: relative;
    width: 50%;
    top: 1.2%;
  }

  .juanzhou {
    position: relative;
margin-top: 20px;
    width: 90%;
  }
//  卷轴动画
  .jz{}
  .contern{
    // position: relative;
    // margin-top: -20px;
    width: 100%;
    height: 380px;

    .dragon{
      z-index: 99999999999999999999999999999999;
      position: absolute;
      left: 18%;
      //transform: translate(-50%);
      width: 70%;
      height: 270px;
      --animate-duration: 2s;
    }
    .cloud{
      position: relative;
      z-index: 10;
      width: 100%;
      height: 265px;
      top: 90px;
      .cloud_img{
        position: absolute;
      }
      .cloud1{
        z-index: 100;
        width: 70%;
        top: 30px;
        left: 14%;

      }
      .cloud2{
        width: 70%;
        top: 48px;
        z-index: 99;
        left: 20px;
      }
      .cloud3{
        z-index: 98;
        width:50%;
        right: 10%;
        top: 28px;
      }
      .cloud4{
        width:43%;
        top: 45px;
        z-index: 97;
      }
      .cloud5{
        z-index: 95;
        width: 50%;
        right: 0%;
        top: 100px;
      }
    }

  }
  .content{
    position: relative;
    top:-18%;
    left: 0;
    z-index: 99999999999999;
    width: 70%;
    height: 80px;
    border-radius: 20px;
    background-color: #ed792d;

    .itemer{
      text-align: center;
      color: white;
      width: 100%;
      height: 39px;
      line-height: 38px;
      span{
        font-size: 18px;
      }
    }
    .itemes{
      width: 100%;
      height: 40px;

      border-radius: 20px;
      border: 2.5px solid white;
      background-color: #feca7a;
      .van-cell__value{
        color: #d28429 !important;
      }
      :deep.van-field__control{
        color: #d28429!important;
      }
      :deep(.van-field__control::-webkit-input-placeholder) {
        color: #ce7e21;
        font-size: 16px;
      }

      :deep(.van-field__control){
        color: #ce7e21;
        font-size: 16px;
      }
      .van-cell{
        .van-field__control{
          color: #d28429!important;
        }
        background-color: transparent;
        text-align: center;
        padding: 0;
        margin: 0;
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;

        input{
          color: #d28429;
        }
      }
    }
  }
  .button{
    width: 50%;
    margin-top: -23%;
    img{
      animation: scaleAnimation 3s  infinite ease-in-out;
    }
  }
}
@keyframes scaleAnimation {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.9);
  }
}
.rotates {
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
</style>